<script setup>
import {onMounted, ref} from 'vue'
import {HomeFilled} from "@element-plus/icons-vue";
import { useRouter} from "vue-router";
import {ai_teach} from '@/api/student/dify.js'
import axios from "axios";
import {ElMessage} from "element-plus";
onMounted(() =>{
    getAiTeachingFirst({
        currentLevel:'提问教学',
        qianwen:'',
        userInput:''
    })
})
const showButton = ref(false)
const router = useRouter()
let count = 0
const user_input = ref('')
const text = ref('请等待 AI 提问，或进入自由问答阶段！')
//问题列表
const questions = ref([])
const answers = ref([])
const search = ref('')
const activeChapter = ref('1-1')
const data = ref({
    currentLevel:'提问教学',
    qianwen:'',
    userInput:''
})
//是否可输入
const isAble = ref(true)
// ai返回的数据记录text
const messages = ref([
    { role: 'ai', text: '你好！我是你的人工智能教学助手，很高兴见到你！接下来我们将进行知识点的授课，请准备好哦！'},
])
const backToHome = () => {
    router.push('/student/Homepage/PersonalHomepage')
}
const handleChapterSelect = (index) => {
    activeChapter.value = index
}
const retry=(idx) => {
    console.log('retry message', idx)
}
let last_msg = ''
//请求ai回答第一次
const getAiTeachingFirst = async (data) =>{
    const back = await axios.post('/api/student/aiteach',data)
    console.log(back.data.data)
    messages.value.push({role:'ai',text:back.data.data.description+','+back.data.data.question})
    last_msg = back.data.data.description+','+back.data.data.question
    questions.value.push(back.data.data.question)

    isAble.value = false
    text.value="请进行提问或回答！"
    count += 1
}
const over = async () =>{
    isAble.value = true
    showButton.value=false
    text.value = '请等待 AI 提问，或进入自由问答阶段！'
    data.value.currentLevel="结束阶段"
    ElMessage.info("进入结束阶段")
    data.value.qianwen += last_msg
    const back = await axios.post('/api/student/aiteach',data)
    messages.value.push({role:'ai',text:back.data.data})
}
//请求ai回答
const getAiTeaching = async () =>{

    isAble.value = true
    text.value = '请等待 AI 提问，或进入自由问答阶段！'
    messages.value.push({role:'user',text:user_input.value})
    data.value.qianwen += last_msg
    data.value.userInput=user_input.value
    user_input.value= ''
    const back = await axios.post('/api/student/aiteach',data)
    messages.value.push({role:'ai',text:back.data.data.description+','+back.data.data.question})
    last_msg = back.data.data.description+','+back.data.data.question
    questions.value.push(back.data.data.question)
    count += 1
    isAble.value = false
    text.value="请进行提问或回答！"
    if(count === 2){
        isAble.value = false
        text.value="请进行提问或回答！"
        data.value.currentLevel = '用户提问'
        ElMessage.info("进入用户提问阶段")
    }
    if(count === 3){
        isAble.value = true
        text.value = '请等待 AI 提问，或进入自由问答阶段！'
        data.value.currentLevel="课后测试"
        ElMessage.info("进入课后测试阶段")
        data.value.qianwen += last_msg
        data.value.userInput=user_input.value
        user_input.value= ''
        const back = await axios.post('/api/student/aiteach',data)
        messages.value.push({role:'ai',text:back.data.data.description+','+back.data.data.question})
        last_msg = back.data.data.description+','+back.data.data.question
        questions.value.push(back.data.data.question)
        isAble.value = false
    }
    if(count === 4){
        isAble.value = false
        text.value="请进行提问或回答！"
        data.value.currentLevel="自由问答"
        ElMessage.info("进入自由问答阶段")
        showButton.value = true
    }
}
</script>

<template>
    <el-container class="learning-page">
        <!-- 左侧导航 -->
        <el-aside width="240px" class="sidebar">
            <el-icon size="30" color="black">
                <HomeFilled @click="backToHome"/>
            </el-icon>
            <el-input
                v-model="search"
                placeholder="搜索对话历史..."
                clearable
                prefix-icon="Search"
                class="search-box"
            />
<!--            展示所有章节知识点-->
            <el-menu
                :default-active="activeChapter"
                class="el-menu-vertical-demo"
                @select="handleChapterSelect"
                unique-opened
            >
                <el-sub-menu>
                    <template #title>第一章 数据结构基础</template>
                    <el-menu-item>时间复杂度</el-menu-item>
                    <el-menu-item>空间复杂度</el-menu-item>
                </el-sub-menu>
                <el-sub-menu >
                    <template #title>第二章 线性表</template>
                    <el-menu-item>顺序表</el-menu-item>
                    <el-menu-item>单链表</el-menu-item>
                    <el-menu-item>双向链表</el-menu-item>
                    <el-menu-item>静态链表</el-menu-item>
                </el-sub-menu>
                <el-sub-menu >
                    <template #title>第三章 栈和队列</template>
                    <el-menu-item>栈</el-menu-item>
                    <el-menu-item>队列</el-menu-item>
                </el-sub-menu>
            </el-menu>
        </el-aside>

        <!-- 中央聊天区域 -->
        <el-main class="content">
            <el-scrollbar>
                <el-card
                    v-for="(msg, idx) in messages"
                    :key="idx"
                    :class="['message', msg.role]"
                    shadow="hover"
                >                                                          <!-- 聊天气泡卡片 :contentReference[oaicite:4]{index=4} -->
                    <template #header>
                        <el-avatar v-if="msg.role==='user'" icon="User" />      <!-- 用户头像 :contentReference[oaicite:5]{index=5} -->
                        <span>{{ msg.role === 'ai' ? 'AI 助手' : '李杭杭' }}</span>
                    </template>
                    <div class="message-content">
                        <p>{{ msg.text }}</p>
                        <el-button
                            v-if="msg.role==='ai'"
                            type="text"
                            @click="retry(idx)"
                        >换个问题</el-button>                                      <!-- 操作按钮 :contentReference[oaicite:6]{index=6} -->
                    </div>
                </el-card>
            </el-scrollbar>
            <div class="input-box">
                <el-input
                    v-model="user_input"
                    :placeholder="text"
                    :disabled="isAble"
                    @keyup.enter="getAiTeaching"
                />
                <el-button type="primary" v-if="showButton" @click="over">结束自由问答阶段</el-button>
            </div>
        </el-main>

        <!-- 右侧问题清单 -->
        <el-aside width="200px" class="question-list">
            <h3>问题清单</h3>
            <el-scrollbar height="800px">
                <p v-for="item in questions" :key="item" class="scrollbar-demo-item">{{item}}</p>
            </el-scrollbar>
        </el-aside>
    </el-container>
</template>



<style scoped>
.scrollbar-demo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    margin: 10px;
    text-align: center;
    border-radius: 4px;
    background: var(--el-color-primary-light-9);
    color: var(--el-color-primary);
}
.learning-page {
    height: 100vh;
    display: flex;
}
.sidebar {
    padding: 10px;
    background: #f5f7fa;
}
.search-box {
    margin-bottom: 12px;
}
.content {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.message {
    margin-bottom: 16px;
}
.message.ai {
    background-color: #e6f7ff;
}
.message.user {
    background-color: #fffbe6;
    text-align: right;
}
.message-video {
    width: 100%;
    max-height: 300px;
    margin-top: 8px;
}
.input-box {
    border-top: 1px solid #ebeef5;
    padding-top: 12px;
}
.question-list {
    padding: 10px;
    background: #fafafa;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.question-badge {
    margin-bottom: 20px;
}
.character {
    text-align: center;
}
</style>
